{extend name="base" /}
{block name="title"}修改实例 - 客服控制台{/block}
{block name="left"}{include file="left_admin" /}{/block}
{block name="content"}
<div class="tpl-content-wrapper">
    <div class="container-fluid am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 设置实例
                    <small>Set example</small>
                </div>
                <p class="page-header-description">皮肤，邀请功能，参与客服等相关参数设置。</p>
            </div>
            <div class="am-u-lg-3 tpl-index-settings-button">
                <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置
                </button>
            </div>
        </div>
    </div>

    <div class="row-content am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">请设置以下参数</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body am-fr">
                        <form class="am-form tpl-form-border-form tpl-form-border-br" onsubmit="return false">
                            <input type="hidden" id="id" value="{$example.id}">
                            <div class="am-tabs" data-am-tabs="{noSwipe: 1}">
                                <ul class="am-tabs-nav am-nav am-nav-tabs">
                                    <li class="am-active"><a href="#tab1">基本</a></li>
                                    <li><a href="#tab2">皮肤</a></li>
                                    <li><a href="#tab3">邀请</a></li>
                                    <li><a href="#tab4">客服</a></li>
                                </ul>
                                <div class="am-tabs-bd">
                                    <div class="am-tab-panel am-fade am-in am-active" id="tab1">

                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-form-label">启用实例</label>
                                            <div class="am-u-sm-9">
                                                <div class="tpl-switch">
                                                    <input type="checkbox" id="example-switch"
                                                           class="ios-switch bigswitch tpl-switch-btn"
                                                           {eq name="example.state" value="1" }checked{/eq}>
                                                    <div class="tpl-switch-btn-view">
                                                        <div></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-form-label">实例名称</label>
                                            <div class="am-u-sm-9">
                                                <input type="text" class="tpl-form-input" id="example-name"
                                                       placeholder="请输入实例名称" value="{$example.name}">
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-form-label">描述</label>
                                            <div class="am-u-sm-9">
                                                    <textarea class="" rows="10" id="description"
                                                              placeholder="请输入描述内容">{$example.description}</textarea>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="am-tab-panel am-fade" id="tab2">

                                        <div class="am-tabs" data-am-tabs="{noSwipe: 1}">
                                            <ul class="am-tabs-nav am-nav am-nav-tabs">
                                                <li class="am-active"><a href="#tab21">PC端</a></li>
                                                <li><a href="#tab22">移动端</a></li>
                                            </ul>

                                            <div class="am-tabs-bd">
                                                <div class="am-tab-panel am-fade am-in am-active" id="tab21">

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">主题色</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="color" value="{$example.color}"
                                                                   placeholder="请输入十六进制颜色值">
                                                            <small>请填写十六进制颜色值，如：#1c97f5</small>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label class="am-u-sm-3 am-form-label">挂件代码</label>
                                                        <div class="am-u-sm-9">
                                                                <textarea id="icon-code" rows="10"
                                                                          placeholder="请输入HTML内容">{$example.icon_code}</textarea>
                                                            <div class="am-margin-top-sm">
                                                                <button type="button" id="default-icon-code"
                                                                        class="am-btn am-btn-primary am-btn-xs">
                                                                    <i class="am-icon-code"></i>
                                                                    默认代码
                                                                </button>
                                                                <button type="button"
                                                                        class="am-btn am-btn-success am-btn-xs am-margin-left-xs">
                                                                    <i class="am-icon-pencil"></i>
                                                                    编写说明
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label class="am-u-sm-3 am-form-label">邀请框代码</label>
                                                        <div class="am-u-sm-9">
                                                                <textarea id="invitation-code" rows="10"
                                                                          placeholder="请输入HTML内容">{$example.invitation_code}</textarea>
                                                            <div class="am-margin-top-sm">
                                                                <button type="button" id="default-invitation-code"
                                                                        class="am-btn am-btn-primary am-btn-xs">
                                                                    <i class="am-icon-code"></i>
                                                                    默认代码
                                                                </button>
                                                                <button type="button"
                                                                        class="am-btn am-btn-success am-btn-xs am-margin-left-xs">
                                                                    <i class="am-icon-pencil"></i>
                                                                    编写说明
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="am-tab-panel am-fade" id="tab22">


                                                    <div class="am-form-group">
                                                        <label class="am-u-sm-3 am-form-label">主题色</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="color-m" value="{$example.color_m}"
                                                                   placeholder="请输入十六进制颜色值">
                                                            <small>请填写十六进制颜色值，如：#1c97f5</small>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label class="am-u-sm-3 am-form-label">挂件代码</label>
                                                        <div class="am-u-sm-9">
                                                                <textarea id="icon-code-m" rows="10"
                                                                          placeholder="请输入HTML内容">{$example.icon_code_m}</textarea>
                                                            <div class="am-margin-top-sm">
                                                                <button type="button"  id="default-icon-code-m"
                                                                        class="am-btn am-btn-primary am-btn-xs">
                                                                    <i class="am-icon-code"></i>
                                                                    默认代码
                                                                </button>
                                                                <button type="button"
                                                                        class="am-btn am-btn-success am-btn-xs am-margin-left-xs">
                                                                    <i class="am-icon-pencil"></i>
                                                                    编写说明
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label class="am-u-sm-3 am-form-label">邀请框代码</label>
                                                        <div class="am-u-sm-9">
                                                                <textarea id="invitation-code-m" rows="10"
                                                                          placeholder="请输入HTML内容">{$example.invitation_code_m}</textarea>
                                                            <div class="am-margin-top-sm">
                                                                <button type="button" id="default-invitation-code-m"
                                                                        class="am-btn am-btn-primary am-btn-xs">
                                                                    <i class="am-icon-code"></i>
                                                                    默认代码
                                                                </button>
                                                                <button type="button"
                                                                        class="am-btn am-btn-success am-btn-xs am-margin-left-xs">
                                                                    <i class="am-icon-pencil"></i>
                                                                    编写说明
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="am-tab-panel am-fade" id="tab3">

                                        <div class="am-tabs" data-am-tabs="{noSwipe: 1}">
                                            <ul class="am-tabs-nav am-nav am-nav-tabs">
                                                <li class="am-active"><a href="#tab31">PC端</a></li>
                                                <li><a href="#tab32">移动端</a></li>
                                            </ul>

                                            <div class="am-tabs-bd">
                                                <div class="am-tab-panel am-fade am-in am-active" id="tab31">


                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">启用邀请</label>
                                                        <div class="am-u-sm-9">
                                                            <div class="tpl-switch">
                                                                <input type="checkbox" id="invitation-switch"
                                                                       class="ios-switch bigswitch tpl-switch-btn"
                                                                       {eq name="example.invitation_switch" value="1"
                                                                       }checked{/eq}>
                                                                <div class="tpl-switch-btn-view">
                                                                    <div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">星期范围</label>
                                                        <div class="am-u-sm-9">
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="7"
                                                                       class="invitation-week-checkbox"
                                                                       name="invitation_week"
                                                                       {volist name="example.invitation_week" id="vo" }
                                                                       {eq name="vo" value="7" }checked{/eq}{/volist}>周日
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="1"
                                                                       class="invitation-week-checkbox"
                                                                       name="invitation_week"
                                                                       {volist name="example.invitation_week" id="vo" }
                                                                       {eq name="vo" value="1" }checked{/eq}{/volist}>周一
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="2"
                                                                       class="invitation-week-checkbox"
                                                                       name="invitation_week"
                                                                       {volist name="example.invitation_week" id="vo" }
                                                                       {eq name="vo" value="2" }checked{/eq}{/volist}>周二
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="3"
                                                                       class="invitation-week-checkbox"
                                                                       name="invitation_week"
                                                                       {volist name="example.invitation_week" id="vo" }
                                                                       {eq name="vo" value="3" }checked{/eq}{/volist}>周三
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="4"
                                                                       class="invitation-week-checkbox"
                                                                       name="invitation_week"
                                                                       {volist name="example.invitation_week" id="vo" }
                                                                       {eq name="vo" value="4" }checked{/eq}{/volist}>周四
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="5"
                                                                       class="invitation-week-checkbox"
                                                                       name="invitation_week"
                                                                       {volist name="example.invitation_week" id="vo" }
                                                                       {eq name="vo" value="5" }checked{/eq}{/volist}>周五
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="6"
                                                                       class="invitation-week-checkbox"
                                                                       name="invitation_week"
                                                                       {volist name="example.invitation_week" id="vo" }
                                                                       {eq name="vo" value="6" }checked{/eq}{/volist}>周六
                                                            </label>

                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">时间范围</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="invitation-time" placeholder="请输入时间范围"
                                                                   value="{$example.invitation_time}">
                                                            <small>在某个时间段内发起邀请，请填写有效的时间范围，格式：00:00:00-23:59:59</small>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">邀请次数</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="invitation-num" placeholder="请输入正整数"
                                                                   value="{$example.invitation_num}">
                                                            <small>邀请次数达到设定值后不再邀请，如果不限制请输入：0</small>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">首次邀请延迟</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="invitation-first" placeholder="请输入正整数"
                                                                   value="{$example.invitation_first}">
                                                            <small>延迟多少秒发起第一次邀请？</small>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">后续邀请延迟</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="invitation-after" placeholder="请输入正整数"
                                                                   value="{$example.invitation_after}">
                                                            <small>首次邀请除外，之后的邀请需要延迟多少秒？</small>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">自动关闭延迟</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="invitation-auto-close" placeholder="请输入正整数"
                                                                   value="{$example.invitation_auto_close}">
                                                            <small>向访客发起邀请后，如果访客没有响应，在多少秒后自动关闭邀请框？如果不关闭请输入：0</small>
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="am-tab-panel am-fade" id="tab32">

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">启用邀请</label>
                                                        <div class="am-u-sm-9">
                                                            <div class="tpl-switch">
                                                                <input type="checkbox" id="invitation-switch-m"
                                                                       class="ios-switch bigswitch tpl-switch-btn"
                                                                       {eq name="example.invitation_switch_m" value="1"
                                                                       }checked{/eq}>
                                                                <div class="tpl-switch-btn-view">
                                                                    <div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">星期范围</label>
                                                        <div class="am-u-sm-9">
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="7"
                                                                       class="invitation-week-m-checkbox"
                                                                       name="invitation_week_m"
                                                                       {volist name="example.invitation_week_m" id="vo"
                                                                       }
                                                                       {eq name="vo" value="7" }checked{/eq}{/volist}>周日
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="1"
                                                                       class="invitation-week-m-checkbox"
                                                                       name="invitation_week_m"
                                                                       {volist name="example.invitation_week_m" id="vo"
                                                                       }
                                                                       {eq name="vo" value="1" }checked{/eq}{/volist}>周一
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="2"
                                                                       class="invitation-week-m-checkbox"
                                                                       name="invitation_week_m"
                                                                       {volist name="example.invitation_week_m" id="vo"
                                                                       }
                                                                       {eq name="vo" value="2" }checked{/eq}{/volist}>周二
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="3"
                                                                       class="invitation-week-m-checkbox"
                                                                       name="invitation_week_m"
                                                                       {volist name="example.invitation_week_m" id="vo"
                                                                       }
                                                                       {eq name="vo" value="3" }checked{/eq}{/volist}>周三
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="4"
                                                                       class="invitation-week-m-checkbox"
                                                                       name="invitation_week_m"
                                                                       {volist name="example.invitation_week_m" id="vo"
                                                                       }
                                                                       {eq name="vo" value="4" }checked{/eq}{/volist}>周四
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="5"
                                                                       class="invitation-week-m-checkbox"
                                                                       name="invitation_week_m"
                                                                       {volist name="example.invitation_week_m" id="vo"
                                                                       }
                                                                       {eq name="vo" value="5" }checked{/eq}{/volist}>周五
                                                            </label>
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="6"
                                                                       class="invitation-week-m-checkbox"
                                                                       name="invitation_week_m"
                                                                       {volist name="example.invitation_week_m" id="vo"
                                                                       }
                                                                       {eq name="vo" value="6" }checked{/eq}{/volist}>周六
                                                            </label>

                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">时间范围</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="invitation-time-m" placeholder="请输入时间范围"
                                                                   value="{$example.invitation_time_m}">
                                                            <small>在某个时间段内发起邀请，请填写有效的时间范围，格式：00:00:00-23:59:59</small>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">邀请次数</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="invitation-num-m" placeholder="请输入正整数"
                                                                   value="{$example.invitation_num_m}">
                                                            <small>邀请次数达到设定值后不再邀请，如果不限制请输入：0</small>
                                                        </div>
                                                    </div>


                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">首次邀请延迟</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="invitation-first-m" placeholder="请输入正整数"
                                                                   value="{$example.invitation_first_m}">
                                                            <small>延迟多少秒发起第一次邀请？</small>
                                                        </div>
                                                    </div>

                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">后续邀请延迟</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="invitation-after-m" placeholder="请输入正整数"
                                                                   value="{$example.invitation_after_m}">
                                                            <small>首次邀请除外，之后的邀请需要延迟多少秒？</small>
                                                        </div>
                                                    </div>
                                                    <div class="am-form-group">
                                                        <label
                                                                class="am-u-sm-3 am-form-label">自动关闭延迟</label>
                                                        <div class="am-u-sm-9">
                                                            <input type="text" class="tpl-form-input"
                                                                   id="invitation-auto-close-m" placeholder="请输入正整数"
                                                                   value="{$example.invitation_auto_close_m}">
                                                            <small>向访客发起邀请后，如果访客没有响应，在多少秒后自动关闭邀请框？如果不关闭请输入：0</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="am-tab-panel am-fade" id="tab4">
                                        <div class="am-form-group">
                                            <label class="am-u-sm-3 am-form-label">选择客服</label>
                                            <div class="am-u-sm-9">
                                                <table class="am-table am-table-bordered" style="margin-bottom: 0;">
                                                    <thead>
                                                    <tr>
                                                        <th width="30"></th>
                                                        <th width="80">编号</th>
                                                        <th width="160">用户名</th>
                                                        <th>客服名称</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    {volist name="staff_list" id="vo"}
                                                    <tr>
                                                        <td><input type="checkbox" value="{$vo.id}"
                                                                   class="staff-list-checkbox" name="staff_pk"
                                                                   {volist name="example.staff_pk" id="v2" }
                                                                   {eq name="v2" value="$vo.id" }checked{/eq} {/volist}>
                                                        </td>
                                                        <td>{$vo.id}</td>
                                                        <td>{$vo.user_name}</td>
                                                        <td>{$vo.name}</td>
                                                    </tr>
                                                    {/volist}
                                                    </tbody>
                                                </table>
                                                <small>
                                                    被勾选的客服才能参与该实例的工作任务
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/example_update.js"></script>
{/block}